<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var messageBoard = document.querySelector('.message-board');
            var messages = [
                { name: '张三', date: '2024-12-16', content: '这是一个很棒的网站，我学到了很多新知识！' },
                { name: '李四', date: '2024-12-15', content: '感谢这个平台，让我能够与大家分享我的想法。' },
                { name: '王五', date: '2024-12-14', content: '网站的设计很简洁，用户体验很好！' }
            ];

            messages.forEach(function(message) {
                var messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                messageDiv.innerHTML = `
                    <p>留言者：${message.name}</p>
                    <p>留言时间：${message.date}</p>
                    <p>留言内容：${message.content}</p>
                `;
                messageBoard.appendChild(messageDiv);
            });
        });
    </script>
</head>
<body>
    <div class="title">
        <h1>留言贴</h1>
        <p>每一份留言都记录了您的想法，也为我们提供了珍贵的回忆</p>
    </div>
    <div class="message-board">
        <!-- 动态添加更多留言 -->
    </div>
</body>
</html>